<template>
  <div id="app">
    按钮
    <div>
      <my-button>默认按钮</my-button>
      <my-button type="primary">主要按钮</my-button>
      <my-button type="warning">警告按钮</my-button>
      <my-button type="danger">危险按钮</my-button>
      <my-button type="success">成功按钮</my-button>
      <my-button type="info">信息按钮</my-button>
      
      <my-icon icon="shouyeshouye"></my-icon>
      <my-icon icon="gouwuche-01"></my-icon>

      <my-button type="info" icon="yewubaobiao">信息按钮</my-button>
      <my-button type="info" icon="shoucang"></my-button>
      <my-button type="info" icon="yewubaobiao" icon-position="right">信息按钮</my-button>

      <my-button type="success" loading>加载中</my-button>

      <my-button type="success" @click="fn">单击事件</my-button>

      <my-button-group>
        <my-button icon="fanhui1" icon-position="left">上一页</my-button>
        <my-button icon="jiant" icon-position="right">下一页</my-button>
      </my-button-group>
    </div>
    <hr>
    layout
    <div>
      <my-row>
        <my-col :span="12">
          <div class="red">aaa</div>
        </my-col>
        <my-col :span="12">
          <div class="green">bbb</div>
        </my-col>
      </my-row>
      <my-row>
        <my-col :span="24">
          <div class="red">ccc</div>
        </my-col>
      </my-row>
      <my-row :gutter="20">
        <my-col :span="8">
          <div class="red">ddd</div>
        </my-col>
        <my-col :span="8">
          <div class="red">ddd</div>
        </my-col>
        <my-col :span="8">
          <div class="red">ddd</div>
        </my-col>
      </my-row>
      <my-row justify="space-around">
        <my-col :span="8">
          <div class="green">ccc</div>
        </my-col>
        <my-col :span="8">
          <div class="green">ddd</div>
        </my-col>
      </my-row>
      <my-row :gutter="10">
        <my-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple"></div>
        </my-col>
        <my-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple-light"></div>
        </my-col>
        <my-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
          <div class="grid-content bg-purple"></div>
        </my-col>
        <my-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="grid-content bg-purple-light"></div>
        </my-col>
      </my-row>
    </div>
    <hr>
    容器
    <div>
      <my-container>
        <my-header>Header</my-header>
        <my-main>Main</my-main>
      </my-container>

      <my-container>
        <my-header>Header</my-header>
        <my-main>Main</my-main>
        <my-footer>Footer</my-footer>
      </my-container>

      <my-container>
        <my-aside width="200px">Aside</my-aside>
        <my-main>Main</my-main>
      </my-container>

      <my-container>
        <my-header>Header</my-header>
        <my-container>
          <my-aside width="200px">Aside</my-aside>
          <my-main>Main</my-main>
        </my-container>
      </my-container>

      <my-container>
        <my-header>Header</my-header>
        <my-container>
          <my-aside width="200px">Aside</my-aside>
          <my-container>
            <my-main>Main</my-main>
            <my-footer>Footer</my-footer>
          </my-container>
        </my-container>
      </my-container>

      <my-container>
        <my-aside width="200px">Aside</my-aside>
        <my-container>
          <my-header>Header</my-header>
          <my-main>Main</my-main>
        </my-container>
      </my-container>

      <my-container>
        <my-aside width="200px">Aside</my-aside>
        <my-container>
          <my-header>Header</my-header>
          <my-main>Main</my-main>
          <my-footer>Footer</my-footer>
        </my-container>
      </my-container>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  methods:{
    fn(e){
      console.log(e)
    }
  }
}
</script>

<style lang="scss">
.red{
  background:red;
}
.green{
  background:green;
}
.my-col{
  border-radius:4px;
}
.bg-purple-dark{background: #99a9bf;}
.bg-purple{background: #d3dce6;}
.bg-purple-light{background: #e5e9f2;}
.grid-content{border-radius:4px;min-height:36px;}


.my-header, .my-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .my-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .my-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .my-container {
    margin-bottom: 40px;
  }
  
  .my-container:nth-child(5) .my-aside,
  .my-container:nth-child(6) .my-aside {
    line-height: 260px;
  }
  
  .my-container:nth-child(7) .my-aside {
    line-height: 320px;
  }
</style>
